<template style="background: #36216c;">
	
	<div style="display: flex;justify-content: space-between;padding: 5vw;height: 5vh;background-color: #36216c;">
		<svg t="1757335753408" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
			p-id="1323" width="7vw">
			<path
				d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3 0.1-12.7-6.4-12.7z"
				p-id="1324" fill="#ffffff"></path>
		</svg>
		<svg t="1757335790565" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
			p-id="1324" width="7vw">
			<path
				d="M114.294312 490.542655l236.669689 143.235961a35.590833 35.590833 0 1 1-36.899777 60.959431L17.370064 515.163283a35.590833 35.590833 0 0 1 4.799464-63.390327l926.047296-386.699699a35.590833 35.590833 0 0 1 48.617951 39.517667l-162.184497 854.803299a35.590833 35.590833 0 0 1-54.040722 23.436346L479.863901 792.223271a35.653164 35.653164 0 0 1 38.084061-60.211462l256.490855 162.683142L914.620574 156.32541 114.294312 490.480324z"
				p-id="1325" fill="#ffffff"></path>
			<path
				d="M392.039937 694.613385v293.764617a35.590833 35.590833 0 1 1-71.243997 0v-310.095262c0-10.409228 4.550142-20.31981 12.466141-27.113857L766.273494 280.488176a35.590833 35.590833 0 1 1 46.311715 54.165383l-420.482942 359.959826z"
				p-id="1326" fill="#ffffff"></path>
		</svg>
	</div>
	
	<swiper class="swiper" style="height: 73vh;width: 100%;background-color: #36216c;border: none;">
		<swiper-item>
			<Detailsy></Detailsy>
		</swiper-item>
		<swiper-item>
			<Detailsg></Detailsg> 
		</swiper-item>
	</swiper>
	<view class="audio-player">
	  <!-- 倍速显示 -->
	  <text class="speed-text">{{ currentSpeed }}x</text>
	  
	  <!-- 单个音频播放器 -->
	  <my-video 
	    ref="audio" 
		subTitleColor='#ffffff'
		titleColor='#ffffff'
	    :src="currentAudio.fileUrl" 
	    :title="currentAudio.title"  
	    :subTitle="currentAudio.disc"
	    isCollectBtn="true" 
	    isShareBtn="true" 
	    titleBackgroundColor="" 
			  @click="handleChangeSpeed()"
			  ></my-video>
	  
		 
	  
	  <!-- 上下首控制按钮 -->
	  <view class="control-buttons">
			  <image src="/static/左 (1).png" mode="" style="width:27px;height:23px;position: absolute;top: 85%;left: 143px;" @click="prevAudio"></image>
			  <image src="/static/右 (1).png" mode="" style="width:23px;height:22px;position: absolute;top: 85%;left: 207px;" @click="nextAudio"></image>
	  </view>
	</view>
	
</template>

<script setup>
	import Detailsg from "../detailsG/detailsG.vue";
	import Detailsy from "../detailsY/detailsY.vue";
	import myVideo from '../../components/my-audio/my-audio.vue'; 
	import {
		ref,
		computed,
		onMounted,
		defineExpose,
		nextTick
	} from 'vue';
	
	// 获取元素引用
	const box = ref(null)
	const yuan = ref(null)
	
	let trans = () => {
		if (box.value && yuan.value) {
			box.value.style.transform = "translateX(-20px)";
			setTimeout(() => {
				box.value.style.transform = "translateX(0px)";
				yuan.value.style.transform = "translateX(0px)";
			}, 1000);
			yuan.value.style.transform = "translateX(20px)";
		}
	}
	defineExpose({
		trans
	});
	// 音频列表数据
	const audioLis = ref([
	  {
	    title: "快乐星球",
	    disc: "猫猫",
	    fileUrl: "/static/1.mp3"
	  },
	  {
	    title: "稻香",
	    disc: "周杰伦",
	    fileUrl: "/static/2.mp3"
	  }
	]);
	
	// 倍速配置
	const speedList = ref([0.5, 0.8, 1.0, 1.25, 1.5, 2.0]);
	const currentSpeedIndex = ref(2); // 默认1.0x对应的索引
	const audioContext = ref(null);   // 音频组件引用
	const currentIndex = ref(0);      // 当前播放的音频索引
	
	// 当前倍速值
	const currentSpeed = computed(() => {
	  return speedList.value[currentSpeedIndex.value];
	});
	
	// 当前播放的音频对象
	const currentAudio = computed(() => {
	  return audioLis.value[currentIndex.value];
	});
	
	// 组件挂载完成后执行 (替代Vue2的onReady)
	onMounted(() => {
	  // 此时可以获取到音频组件引用
	});
	
	// 切换倍速
	const handleChangeSpeed = () => {
	  currentSpeedIndex.value = (currentSpeedIndex.value + 1) % speedList.value.length;
	  
	  if (audioContext.value) {
	    // H5平台：直接设置playbackRate
	    if (uni.getSystemInfoSync().platform === 'h5') {
	      audioContext.value.playbackRate = currentSpeed.value;
	    } else {
	      // 小程序平台：调用组件方法setPlaybackRate
	      audioContext.value.setPlaybackRate({
	        rate: currentSpeed.value
	      });
	    }
	    
	    uni.showToast({
	      title: `当前速度: ${currentSpeed.value}x`,
	      icon: 'none',
	      duration: 1000
	    });
	  }
	};
	
	// 播放指定索引的音频
	const playAudio = (index) => {
	  currentIndex.value = index;
	  nextTick(() => {
	    if (audioContext.value) {
	      // 1. 先加载新的音频源（确保资源就绪）
	      audioContext.value.load();
	      // 2. 加载完成后执行播放
	      audioContext.value.play();
	    }
	  });
	};
	
	const load = () => {
	  audioContext.value?.load(); // 转发load方法到原生audio
	};
	
	const play = () => {
	  audioContext.value?.play(); // 转发play方法到原生audio
	};
	
	// 上一首
	const prevAudio = () => {
	  let index = currentIndex.value - 1;
	  if (index < 0) index = audioLis.value.length - 1; // 循环到最后一首
	  playAudio(index);
	};
	
	// 下一首
	const nextAudio = () => {
	  let index = currentIndex.value + 1;
	  if (index >= audioLis.value.length) index = 0; // 循环到第一首
	  playAudio(index);
	};
</script>

<style>
	.song-title {
		margin: 30upx;
	}
	.audio_container{
		background:red;
		width:100vh;
	}
	.song-name {
		text-align: center;
		color: #FFFFFF;
		font-size: 35upx;
		margin-top: 30upx;
	
	}
	
	.song-author {
		text-align: center;
		color: #FFFFFF;
		font-size: 25upx;
	}
	
	.info {
		position: absolute;
		left: 0;
		bottom: 0;
		background-color:transparent;
		height: 30vw;
		
		width: 100vw;
	}
	
	.iconbtn {
		width: 60upx;
		height: 60upx;
		margin-left: 30upx;
		margin-right: 30upx;
	
	}
	
	.imt-audio {
		padding: 30upx;
		background: #fff;
		border-radius: 20upx;
	}
	
	.audio-wrapper {
		display: flex;
		align-items: center;
		margin: 30upx;
	}
	
	.audio-number {
		font-size: 24upx;
		line-height: 1;
		color: #FFFFFF;
	}
	
	.audio-slider {
		flex: 1;
		margin: 0 30upx;
	}
	
	.audio-control-wrapper {
		margin-top: 20upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: "iconfont" !important;
	}
/* 倍速文字样式 */
.speed-text {
  display: flex;
  align-items: center;
  color: black;
  font-size: 26rpx;
  margin: 10rpx;
  position:absolute;
  	top: 152px;
    left: 41px;

}

/* 音频列表项样式 */
.audio-list {
  margin: 10rpx 0;
}
.audio-item {
  padding: 15rpx;
  border-bottom: 1rpx solid #eee;
}
/* 高亮当前播放的音频项 */
.active {
  background-color: #f5f5f5;
  color: #007aff;
}

/* 控制按钮样式 */
.control-buttons {
  display: flex;
  gap: 10rpx;
  padding: 10rpx;
}
button {
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 5rpx;
}
</style>